/* playthesims.online: wygląd z projektu Claude Design (landing, zamknięta beta, polityka prywatności).
   Gra (nakładka, pauza, ekran ładowania) i okna konta mają własne style w index.html. */
@font-face{font-family:'SimsLLHP';src:url('fonts/SimsLLHP.ttf') format('truetype');font-display:swap;
  unicode-range:U+0020-00D2,U+00D4-00F2,U+00F4-00FF,U+2018-201F,U+2026}
/* Comic Neue z naszego serwera (licencja OFL: fonts/ComicNeue-OFL.txt), pełny zestaw z polskimi literami. Telefony nie mają
   Comic Sans, a Comic Neue z Google Fonts ma tylko podstawową łacinkę, więc ą ę ź ż wpadały w pisankę (cursive). */
@font-face{font-family:'Comic Neue';src:url('fonts/ComicNeue-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('fonts/ComicNeue-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--f-body:'Comic Sans MS','Comic Neue',sans-serif;--f-head:'SimsLLHP','Comic Sans MS','Comic Neue',sans-serif}
html,body{margin:0;background:#040a3c;color:#c9d6ff;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:#7ee04f;color:#05210a}
.i18n-wait .site{visibility:hidden}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
body.in-game .site{display:none}

.site{font-family:var(--f-body);background:#040a3c;min-height:100vh;overflow-x:clip}
.site a{color:#00faf6;text-decoration:underline;text-underline-offset:3px}
.site a:hover{color:#7ee04f}
.site :focus-visible{outline:3px solid #ffd84a;outline-offset:2px}
.h-display{margin:0;font-family:var(--f-head);font-weight:400;font-synthesis:none;letter-spacing:.02em;color:#fff;text-wrap:balance}
.label{font-size:22px;letter-spacing:.14em;color:#00faf6}
.wrap{max-width:1360px;margin:0 auto;padding:clamp(72px,9vw,130px) clamp(16px,3vw,40px)}

/* przyciski w kształcie liścia */
.leaf{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:20px 8px 20px 8px;cursor:pointer;
  font-family:var(--f-body);font-weight:700;text-decoration:none!important;white-space:nowrap}
.leaf:active{transform:translateY(1px)}
.leaf-green{color:#05210a!important;text-shadow:0 1px 0 rgba(255,255,255,.4);background:linear-gradient(#c8ff9a,#6fd94a 50%,#3fae2a);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,40,0,.3)}
.leaf-green:hover{filter:brightness(1.08)}
.leaf-blue{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,40,.6);background:linear-gradient(#78b8ff,#3a78e8 50%,#2358cc);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,40,.35)}
.leaf-blue:hover{filter:brightness(1.12)}
.leaf-discord{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,40,.6);background:linear-gradient(#8f98ff,#5865f2 50%,#4450d0);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,40,.35)}
.leaf-discord:hover{filter:brightness(1.1)}
.leaf-sm{font-size:15px;padding:8px 18px}
.leaf-md{font-size:17px;padding:14px 30px}
.leaf-lg{font-size:17px;letter-spacing:.04em;padding:16px 30px}
.tri{width:0;height:0;border-left:11px solid #05210a;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* panele */
.panel{background:#0b1c80;border:2px solid #5b8cff;border-radius:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.35),0 30px 70px -24px rgba(0,0,0,.85)}
.info{border:2px solid #8fa8ff;border-radius:14px;background:#0a1872;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.well{background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6;border-radius:10px}
.titlebar{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 14px;background:linear-gradient(90deg,#0b1f86,#2f6ae0);
  font-size:17px;letter-spacing:.06em;color:#fff}
.titlebar .t{flex:1}
.winbtn{width:16px;height:14px;border-radius:3px;background:#c9ccd6;box-shadow:inset -1px -1px 0 #6b6f80,inset 1px 1px 0 #fff}
.plumbob{width:100%;height:100%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#d2ff9e,#5fd13a 50%,#2a8a1c)}
.dot{width:8px;height:8px;background:#7ee04f;box-shadow:0 0 8px #7ee04f}

/* ---------------------------------------------------------------- nagłówek */
.hdr{position:sticky;top:0;z-index:50;background:rgba(3,8,48,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #1b3aa8;box-shadow:inset 0 -1px 0 rgba(0,0,0,.5)}
.hdr-in{max-width:1360px;margin:0 auto;padding:10px clamp(16px,3vw,40px);display:flex;align-items:center;gap:20px}
.hdr-logo{display:flex;align-items:center;flex:none}
.hdr-logo img{height:46px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.hdr-nav{display:none;gap:4px;margin-left:auto;font-size:14px;font-weight:500}
.hdr-nav a{display:flex;align-items:center;gap:8px;color:#c9d6ff!important;text-decoration:none!important;padding:8px 12px;border-radius:10px}
.hdr-nav a:hover{color:#fff!important;background:#0b1c80}
.hdr-nav a.dc:hover{background:#5865f2}
@media (min-width:1100px){.hdr-nav{display:flex}}
.hdr-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.lang{display:flex;padding:2px;gap:2px;border-radius:10px;background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6}
.lang button{position:relative;font:inherit;font-size:13px;font-weight:700;border:0;cursor:pointer;padding:4px 10px;border-radius:7px;color:#9fb6ff;background:transparent}
.lang button[aria-pressed="true"]{color:#fff;background:#3a78e8}
/* palec: pole do stuknięcia co najmniej 40 px wysokości, wygląd bez zmian */
.lang button::after{content:"";position:absolute;left:0;right:0;top:50%;height:40px;margin-top:-20px}
/* przycisk konta z account.js: „Zaloguj się” = niebieski liść, zalogowany = avatar + login */
.hdr .acct-nav{display:flex;align-items:center}
.hdr .nav-login{display:inline-flex;align-items:center;font-family:var(--f-body);font-weight:700;font-size:15px;padding:8px 18px;cursor:pointer;
  color:#fff;text-shadow:0 1px 1px rgba(0,0,40,.6);border:0;border-radius:20px 8px 20px 8px;background:linear-gradient(#78b8ff,#3a78e8 50%,#2358cc);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,40,.35);white-space:nowrap}
.hdr .nav-login:hover{filter:brightness(1.12);background:linear-gradient(#78b8ff,#3a78e8 50%,#2358cc);color:#fff}
.hdr .nav-me{display:flex;align-items:center;gap:8px;max-width:190px;padding:3px 14px 3px 3px;cursor:pointer;
  font:700 14px var(--f-body);color:#fff;border:2px solid #5b8cff;border-radius:20px 8px 20px 8px;
  background:linear-gradient(#1c3fb0,#0b1c80);box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}
.hdr .nav-me:hover{filter:brightness(1.12)}
.hdr .nav-me img{flex:none;width:30px;height:30px;border-radius:14px 5px 14px 5px;object-fit:cover;border:1px solid #8fa8ff}
.hdr .nav-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:460px){
  .hdr-in{gap:10px}
  .hdr-logo img{height:36px}
  .hdr-right{gap:8px}
  .hdr .leaf-sm,.hdr .nav-login{font-size:14px;padding:7px 12px}
  .hdr .nav-me span{display:none}
  .hdr .nav-me{padding:3px}
  .lang button{padding:4px 7px}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background-color:#040a3c;background-image:radial-gradient(ellipse 60% 55% at 72% 48%,rgba(46,110,255,.38),transparent 70%);overflow:hidden}
.hero-in{max-width:1360px;margin:0 auto;padding:clamp(40px,6vw,96px) clamp(16px,3vw,40px) clamp(64px,7vw,120px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,4vw,64px)}
.hero-text{flex:1 1 420px;min-width:0;max-width:600px;display:flex;flex-direction:column;gap:28px;position:relative;z-index:3;order:1}
.hero-crt{flex:1 1 520px;min-width:0;display:flex;justify-content:center;position:relative;order:2}
.badges{display:flex;flex-wrap:wrap;gap:8px;font-size:20px;letter-spacing:.06em}
.badge{display:flex;align-items:center;gap:8px;background:#07085e;border:2px solid #8f9cf0;border-radius:12px;padding:3px 12px}
.badge.g{color:#7ee04f}
.badge.t{color:#00faf6}
/* „W grze teraz: N” (site.js, api: online): jak plakietki nad tytułem; schowane, gdy serwer nie odpowie */
.online{text-transform:uppercase;font-variant-numeric:tabular-nums}
.online .dot{border-radius:50%}
.hero h1{font-size:clamp(46px,6.2vw,100px);line-height:.9}
.hero h1 span{display:block;color:#00faf6}
.hero-copy{display:flex;flex-direction:column;gap:12px;max-width:500px}
.welcome{margin:0;font-size:28px;color:#7ee04f;line-height:1}
.hero-sub{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#c9d6ff;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.checks{display:flex;flex-wrap:wrap;row-gap:10px;gap:clamp(10px,1.6vw,22px);font-size:clamp(12px,1.05vw,15px);font-weight:700;letter-spacing:.06em;color:#dfe8ff}
.checks span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.checks i{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:7px 3px 7px 3px;font-style:normal;
  background:linear-gradient(#c8ff9a,#6fd94a 50%,#3fae2a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);color:#05210a;font-size:13px;font-weight:700}
@media (max-width:719px){.hero-text{order:2}.hero-crt{order:1}}
@media (max-width:520px){.checks{flex-wrap:wrap}}

/* monitor CRT */
.crt{position:relative;width:min(640px,100%);perspective:1600px}
.crt-tilt{transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d}
.crt-case{position:relative;background:linear-gradient(160deg,#efe7d2 0%,#ddd3ba 45%,#c4b898 100%);border-radius:30px 30px 22px 22px;
  padding:clamp(18px,4.5%,30px) clamp(18px,4.5%,30px) 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -6px 12px rgba(0,0,0,.18),inset 6px 0 10px rgba(255,255,255,.25),18px 30px 60px -10px rgba(0,0,0,.65),40px 50px 80px -30px rgba(0,0,0,.6)}
.crt-bezel{background:linear-gradient(#a99d7e,#c2b796);border-radius:22px;padding:clamp(10px,2.4%,16px);box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.5)}
.crt-screen{position:relative;aspect-ratio:4/3;background:#000;border-radius:28px/22px;overflow:hidden;box-shadow:0 0 0 2px #1a1a1a,0 0 40px rgba(80,150,255,.35)}
.crt-screen img,.pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pan{position:absolute;inset:-4%}
.fx{position:absolute;inset:0;pointer-events:none}
.fx-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.fx-vig{background:radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.75) 100%)}
.fx-glare{background:radial-gradient(ellipse 55% 35% at 28% 18%,rgba(255,255,255,.22),transparent 70%),linear-gradient(115deg,rgba(255,255,255,.08) 0 30%,transparent 30%)}
.fx-glow{box-shadow:inset 0 0 50px rgba(120,180,255,.25)}
.cursor{position:absolute;left:30%;top:40%;pointer-events:none;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
.crt-chin{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 16px}
.crt-brand{font-weight:800;font-size:12px;letter-spacing:.3em;color:#8b8064}
.crt-ctrls{display:flex;align-items:center;gap:10px}
.crt-slot{width:26px;height:6px;border-radius:3px;background:#b3a888;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.crt-led{width:8px;height:8px;border-radius:50%;background:#7ee04f;box-shadow:0 0 8px #7ee04f,0 0 2px #fff}
.crt-knob{width:22px;height:22px;border-radius:50%;background:linear-gradient(#e8dfc8,#bfb393);box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(0,0,0,.35)}
.crt-neck{width:34%;height:34px;margin:0 auto;background:linear-gradient(#b8ac8c,#d6ccb1);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.crt-base{width:56%;height:20px;margin:0 auto;border-radius:50%;background:linear-gradient(#e4dbc4,#b5a989);box-shadow:0 14px 26px rgba(0,0,0,.55)}
.kbd-row{display:flex;align-items:flex-end;gap:5%;justify-content:center;margin-top:18px;perspective:700px}
.keyboard{width:74%;height:62px;transform:rotateX(52deg);border-radius:8px;background-color:#d9cfb5;background-position:6px 6px;
  background-image:repeating-linear-gradient(90deg,transparent 0 3px,#c3b796 3px 4px,transparent 4px 22px),repeating-linear-gradient(0deg,transparent 0 3px,#c3b796 3px 4px,transparent 4px 15px);
  box-shadow:inset 0 2px 0 #fff,0 14px 20px rgba(0,0,0,.5)}
.mouse{width:9%;height:46px;transform:rotateX(45deg);border-radius:40% 40% 46% 46%;background:linear-gradient(#ece4cf,#c3b796);box-shadow:inset 0 2px 0 #fff,0 10px 16px rgba(0,0,0,.5)}
.float-exe{position:absolute;left:-7%;top:6%;width:250px;z-index:4;padding:4px}
.exe-title{display:flex;align-items:center;gap:8px;padding:6px 10px 2px;font-size:17px;font-weight:700;color:#fff}
.exe-title img{width:22px;height:22px;display:block}
.exe-log{padding:10px 12px;font-size:17px;line-height:1.3;color:#bcd0ff;margin:6px}
.exe-log .ok{color:#7ee04f}
.exe-log .last{color:#00faf6}
.caret{display:inline-block;width:9px;height:15px;background:#00faf6;margin-left:4px;vertical-align:-2px}
.float-needs{position:absolute;right:-6%;bottom:22%;width:220px;z-index:4;padding:12px 14px 14px}
.needs-t{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px}
.needs{display:flex;flex-direction:column;gap:7px}
.need{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#c9d6ff}
.need-bar{height:10px;background:#000733;border:1px solid #3c5bd6;border-radius:3px;overflow:hidden}
.need-bar b{display:block;height:100%;transition:width 1.2s ease,background 1.2s}
.float-pb{position:absolute;right:4%;top:-6%;z-index:4;width:64px;height:96px}
.pb-glow{width:44px;height:72px;filter:drop-shadow(0 0 14px rgba(126,224,79,.9))}
.float-money{position:absolute;left:4%;bottom:14%;z-index:4;font-size:24px;color:#05210a;background:#7ee04f;padding:2px 12px;
  box-shadow:4px 4px 0 #020627;border-radius:8px 3px 8px 3px}
@media (max-width:719px){.extras{display:none}}

/* pasek z napisami */
.ticker{background:#7ee04f;color:#05210a;overflow:hidden;border-top:2px solid #b8ff8f;border-bottom:2px solid #2e941f}
.ticker-run{display:flex;width:max-content;font-size:26px;letter-spacing:.04em;padding:16px 0;white-space:nowrap}
.ticker-run span{padding-right:48px}

/* ---------------------------------------------------------------- 02 kolekcja */
.coll{background:linear-gradient(90deg,#02095b,#01186b 50%,#01277b);border-top:1px solid #1b3aa8;border-bottom:1px solid #1b3aa8;scroll-margin-top:60px}
.coll-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(36px,5vw,56px)}
.coll-head-l{flex:1 1 480px;min-width:0;max-width:820px;display:flex;flex-direction:column;gap:14px}
.coll-head h2{font-size:clamp(38px,5vw,76px);line-height:.95}
.coll-head-r{flex:0 1 460px;min-width:0;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.coll-head-r p{margin:0;max-width:460px;text-align:right;font-size:17px;line-height:1.55;text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-left:auto;font-size:18px}
.tag{padding:2px 12px;border-radius:10px 4px 10px 4px}
.tag-g{color:#05210a;background:#7ee04f}
.tag-t{color:#021245;background:#00faf6}
.tag-w{color:#c9d6ff;background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6;border-radius:10px}
.coll-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.coll-menu{position:sticky;top:84px;padding:14px}
.coll-menu-t{font-size:19px;font-weight:700;color:#fff;padding:2px 6px 12px}
.coll-list{display:flex;flex-direction:column;gap:6px}
.coll-btn{position:relative;display:grid;grid-template-columns:36px 1fr 14px;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:none;border-radius:10px;padding:12px;font-family:var(--f-body);font-size:15px;font-weight:600;color:#dfe8ff;
  background:linear-gradient(#000733,#020f4a);box-shadow:inset 0 0 0 2px #3c5bd6;transition:background .2s}
.coll-btn:hover{filter:brightness(1.15)}
.coll-btn .k{font-size:22px;color:#00faf6}
.coll-btn .arr{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0}
.coll-btn.on{color:#fff;background:linear-gradient(#78b8ff,#3a78e8 50%,#2358cc);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,40,.35)}
.coll-btn.on .k{color:#fff}
.coll-btn.on .arr{opacity:1}
.coll-btn .cover{position:absolute;right:28px;top:50%;width:58px;aspect-ratio:.8;border-radius:4px;background-size:cover;background-position:center;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.85);pointer-events:none;z-index:2;opacity:0;
  transform:translateY(-40%) rotate(0deg) scale(.6);transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.3,1.35)}
.coll-btn.on .cover,.coll-btn:hover .cover{opacity:1;transform:translateY(-50%) rotate(var(--tilt,-6deg)) scale(1)}
.coll-panel{overflow:hidden}
.stage{position:relative;aspect-ratio:16/9;margin:8px;background:#020627;border-radius:10px}
.stage-clip{position:absolute;inset:0;overflow:hidden;border-radius:10px}
.stage-bgwrap{position:absolute;inset:-5%;transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.stage-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.stage-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,6,39,0) 45%,rgba(2,6,39,.55) 100%),radial-gradient(ellipse 80% 70% at 30% 50%,transparent 50%,rgba(2,6,39,.5) 100%)}
.stage-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.stage-glare{position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);mix-blend-mode:screen}
.render{position:absolute;bottom:-3%;pointer-events:none;transition:translate .35s cubic-bezier(.2,.7,.2,1)}
.render .idle{height:100%}
.render .img{height:100%;background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(0,0,0,.65)) drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.stage-tags{position:absolute;left:14px;top:12px;display:flex;gap:6px;transition:translate .4s}
.stage-tags span{font-size:14px;letter-spacing:.12em;padding:2px 10px}
.stage-tags .y{color:#05210a;background:#7ee04f;border-radius:8px 3px 8px 3px}
.stage-tags .n{color:#fff;background:rgba(2,6,39,.75);border-radius:8px}
.coll-info{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;padding:14px 20px 22px}
.coll-info-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
.coll-info h3{margin:0;font-weight:800;font-size:clamp(24px,2.4vw,34px);color:#fff;letter-spacing:-.01em}
.coll-info p{margin:0;font-size:16px;line-height:1.55;color:#c9d6ff;text-wrap:pretty}
.coll-info .tag{font-size:18px}
@media (max-width:1039px){.coll-grid{grid-template-columns:minmax(0,1fr)}.coll-menu{position:static}}

/* ---------------------------------------------------------------- 03 przeglądarka */
.browser{scroll-margin-top:60px}
.browser-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.browser-l{display:flex;flex-direction:column;gap:28px}
.browser-l .head{display:flex;flex-direction:column;gap:14px}
.browser h2{font-size:clamp(38px,4.6vw,68px);line-height:.95}
.browser-l p{margin:0;font-size:17px;line-height:1.55;text-wrap:pretty}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.step{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;background:transparent;
  box-shadow:inset 0 0 0 2px transparent;transition:background .3s}
.step .n{font-size:30px;line-height:1;color:#3d5bc4}
.step.on{background:#0b1c80;box-shadow:inset 0 0 0 2px #5b8cff}
.step.on .n{color:#7ee04f}
.step .tx{display:flex;flex-direction:column;gap:2px}
.step strong{font-size:16px;color:#fff;font-weight:600}
.step .d{font-size:14px;color:#9fb6ff}
.ctrl{display:flex;flex-direction:column;gap:10px}
.ctrl-t{font-size:19px;letter-spacing:.12em;color:#8ea6f0}
.keys{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14px}
.keys span{display:flex;align-items:center;gap:8px}
.keys kbd{font-family:var(--f-body);font-size:17px;color:#fff;padding:2px 12px;background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6;border-radius:10px}
.bmock{position:relative;padding:6px;overflow:hidden}
.bm-tabs{display:flex;align-items:flex-end;gap:4px;padding:4px 6px 0}
.bm-tab{display:flex;align-items:center;gap:8px;padding:7px 14px;background:linear-gradient(90deg,#0b1f86,#2f6ae0);border-radius:10px 10px 0 0;font-size:13px;font-weight:700;color:#fff}
.bm-tab i{width:10px;height:10px;border-radius:50%;background:#7ee04f}
.bm-plus{padding:6px 14px;font-size:13px;color:#9fb6ff}
.bm-bar{display:flex;align-items:center;gap:8px;padding:8px}
.bm-nav{font-size:18px;color:#c9d6ff;padding:0 4px}
.bm-url{flex:1;min-width:0;padding:6px 12px;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-view{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden;border-radius:10px;border:2px solid #3c5bd6}
.ph{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.ph.on{opacity:1}
.ph0{padding:7% 8%;font-size:clamp(16px,1.7vw,24px);line-height:1.3;color:#c9d6ff;display:flex;flex-direction:column;gap:4px}
.ph0 .w{color:#fff}
.ph0 .g{margin-top:auto;color:#7ee04f}
.prog0{height:18px;background:#020627;box-shadow:inset 1px 1px 0 #444}
.prog0 b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#7ee04f 0 12px,transparent 12px 15px)}
.ph1{background:#0f7f80;display:flex;align-items:center;justify-content:center}
.w98{width:62%;background:#c9ccd6;padding:3px;box-shadow:inset -2px -2px 0 #6b6f80,inset 2px 2px 0 #fff,6px 6px 0 rgba(0,0,0,.3)}
.w98-t{padding:4px 8px;background:linear-gradient(90deg,#0b1f86,#2f6ae0);font-size:19px;color:#fff}
.w98-b{padding:16px 14px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:#0a1450}
.prog1{height:18px;background:#fff;box-shadow:inset 2px 2px 0 #6b6f80}
.prog1 b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#0b1f86 0 10px,transparent 10px 12px)}
.ph2{transition:opacity .6s}
.ph2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.run-toast{position:absolute;left:4%;top:5%;font-size:20px;color:#05210a;background:#7ee04f;padding:1px 10px;pointer-events:none;
  transform:translateY(-12px);transition:transform .6s}
.ph2.on .run-toast{transform:none}
.bm-status{display:flex;justify-content:space-between;gap:12px;padding:7px 8px 3px;font-size:12px;color:#9fb6ff}
@media (max-width:1039px){.browser-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- 04 telefon (landing) / też na telefonie (beta) */
.mob{background:linear-gradient(90deg,#02095b,#01186b 50%,#01277b);border-top:1px solid #1b3aa8;border-bottom:1px solid #1b3aa8;scroll-margin-top:60px}
.mob.mob-alt{background:#040a3c;border:0}
.mob-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.mob-phone-col{display:flex;justify-content:center}
.phone{position:relative;width:min(560px,100%);aspect-ratio:2.05/1;padding:clamp(10px,1.6vw,16px) clamp(24px,3.6vw,36px);
  border-radius:clamp(26px,4vw,42px);background:linear-gradient(145deg,#2c3040,#0d0f16 62%);
  box-shadow:inset 0 0 0 2px #3a3f55,inset 0 2px 0 rgba(255,255,255,.16),0 30px 60px -18px rgba(0,0,0,.85),0 0 60px rgba(46,110,255,.25)}
/* tło obok obrazu jak w grze na telefonie (#game: #000052), nie czarne; container = jednostki cqw/cqh dla menu i komunikatu */
.phone-screen{position:relative;width:100%;height:100%;border-radius:clamp(14px,2vw,22px);overflow:hidden;background:#000052;container-type:size}
.phone-screen img{width:100%;height:100%;object-fit:contain;display:block}
.phone-cam{position:absolute;left:clamp(9px,1.4vw,14px);top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#151a28;box-shadow:inset 0 0 0 2px #2e3448}
.phone-menu{position:absolute;left:3%;top:6%;width:clamp(24px,3.2vw,36px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#63aef7 0%,#3279d9 48%,#1c4fae 100%);border:2px solid #c4dcff;box-shadow:0 4px 12px rgba(0,0,30,.55);opacity:.85}
.phone-menu svg{width:56%;height:56%}
.tap{position:absolute;left:57%;top:55%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 18px rgba(255,255,255,.5);opacity:0;pointer-events:none}
.mob-text{display:flex;flex-direction:column;gap:18px}
.mob h2{font-size:clamp(38px,4.6vw,68px);line-height:.95}
.mob-text p{margin:0;font-size:17px;line-height:1.55;text-wrap:pretty}
.gestures{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gestures li{display:flex;align-items:center;gap:12px;font-size:15px}
.gestures kbd{font-family:var(--f-body);font-size:16px;color:#fff;padding:3px 12px;min-width:46px;text-align:center;white-space:nowrap;
  background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6;border-radius:10px}
.mob-text .mob-note{font-size:14px;color:#9fb6ff}
.mob-text .mob-fact{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:14px;border:1px dashed #5b8cff;
  background:rgba(0,0,60,.35);font-size:15.5px;line-height:1.5;color:#dfe8ff}
.mob-fact svg{width:30px;height:30px;flex:none;color:#00faf6;margin-top:1px}
/* telefon w sekcji 04 jak w grze: w pionie komunikat „obróć telefon”, obrót, stuknięcie w menu otwiera okno pauzy.
   Cykl 14 s (animacje niżej, tylko bez prefers-reduced-motion); bez animacji widać grę w poziomie. */
.phone-float{width:min(560px,100%)}
.mob-phone-col{padding-block:5%}
.ph-rot{position:absolute;left:50%;top:50%;z-index:4;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(-90deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;padding:0 9cqh;text-align:center;
  background:#000052;color:#fff;font-family:var(--f-body);font-size:9.5cqh;line-height:1.25;opacity:0}
.ph-rot svg{width:34cqh;height:34cqh;flex:none}
.ph-menu{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(0,0,40,.3);
  opacity:0;visibility:hidden}
.ph-dlg{width:64cqw;padding:2.4cqh 2.8cqh 3cqh;border-radius:1.8cqh;background:#000052;border:1px solid #3846b0;color:#fff;text-align:center;
  font-family:var(--f-body);box-shadow:0 0 0 1px #00001e,0 2cqh 5cqh rgba(0,0,20,.7)}
.ph-panel{display:flex;flex-direction:column;gap:.6cqh;text-align:left;padding:1.8cqh 2.6cqh 2.2cqh;border-radius:2.8cqh;
  background:#00005c;border:2px solid #a9b5f2;font-size:4.8cqh;line-height:1.3}
.ph-panel b{font-size:6.2cqh;font-weight:400}
.ph-btns{display:flex;gap:2.2cqh;justify-content:center;margin-top:3.4cqh}
.ph-gw{position:relative;display:inline-flex}
.ph-b{display:inline-flex;font-size:5.2cqh;padding:.9cqh 3.4cqh;border:1px solid #c4dcff;border-radius:3.4cqh 1.3cqh 3.4cqh 1.3cqh;
  transform:skewX(-16deg);background:linear-gradient(180deg,#63aef7 0%,#3279d9 48%,#1c4fae 100%);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 .6cqh 1.4cqh rgba(0,0,20,.55)}
.ph-b i{font-style:normal;transform:skewX(16deg);text-shadow:0 1px 2px rgba(0,0,40,.6)}
.ph-b.go{font-size:6cqh;padding:1.1cqh 4.2cqh;background:linear-gradient(180deg,#8be86d 0%,#3fb83c 48%,#1f8a2a 100%);border-color:#d4f8c6}
.ph-sec{margin-top:2.6cqh;padding-top:2.6cqh;border-top:1px solid #2a3699;gap:1.8cqh}
.ph-sec .ph-b{font-size:4.4cqh;padding:.7cqh 2.6cqh;border-color:#8fa0ea;background:linear-gradient(180deg,#5068cf,#2c3d9e 50%,#1b2672)}
.ph-tap{position:absolute;left:50%;top:50%;width:14cqh;height:14cqh;margin:-7cqh 0 0 -7cqh;border-radius:50%;
  border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 18px rgba(255,255,255,.5);opacity:0;pointer-events:none}
/* wkrótce: gra na telewizorze / konsoli, telefon jako pad */
.tvs{background:radial-gradient(70% 80% at 72% 45%,#0b2a8f 0%,#040a3c 62%);border-top:1px solid #1b3aa8;scroll-margin-top:60px}
.tvs-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.tvs-text{display:flex;flex-direction:column;gap:18px}
.tvs h2{font-size:clamp(38px,4.6vw,68px);line-height:.95}
.tvs-text p{margin:0;font-size:17px;line-height:1.55;text-wrap:pretty}
.tvs-text .mob-note{font-size:14px;color:#9fb6ff}
.tvs-art{position:relative;padding:5% 7% 9% 0}
.tvs-soon{position:absolute;left:0;top:0;z-index:3;padding:6px 14px;border-radius:999px;background:#00faf6;color:#021245;
  font:700 13px/1 var(--f-body);letter-spacing:2px;box-shadow:0 4px 14px rgba(0,250,246,.35)}
.tv{position:relative;aspect-ratio:16/9.4;padding:1.6%;border-radius:clamp(10px,1.4vw,16px);background:linear-gradient(160deg,#2a2f40,#0b0d14 70%);
  box-shadow:inset 0 0 0 2px #3a3f55,inset 0 2px 0 rgba(255,255,255,.12),0 30px 60px -18px rgba(0,0,0,.85),0 0 70px rgba(46,110,255,.25)}
.tv-screen{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#000052}
.tv-screen img{width:100%;height:100%;object-fit:contain;display:block}
.tv-screen .cursor{width:clamp(12px,3%,22px);height:auto}
.tv-led{position:absolute;right:3%;bottom:.55%;width:6px;height:6px;border-radius:50%;background:#7ee04f;box-shadow:0 0 6px #7ee04f}
.tv-stand{width:24%;height:clamp(8px,1.2vw,14px);margin:0 auto;background:linear-gradient(#1a1e2b,#0b0d14);border-radius:0 0 10px 10px}
.tv-waves{position:absolute;right:17%;bottom:36%;z-index:2;width:9%;fill:none;stroke:#00faf6;stroke-width:3;stroke-linecap:round}
.pad-phone{position:absolute;right:0;bottom:0;z-index:2;width:21%;aspect-ratio:1/2;padding:clamp(7px,1vw,11px) clamp(4px,.6vw,7px);
  border-radius:clamp(12px,1.8vw,22px);background:linear-gradient(145deg,#2c3040,#0d0f16 62%);
  box-shadow:inset 0 0 0 2px #3a3f55,0 20px 40px -12px rgba(0,0,0,.9),0 0 40px rgba(46,110,255,.3)}
.pad-screen{width:100%;height:100%;display:flex;flex-direction:column;gap:7%;padding:12% 9%;border-radius:clamp(8px,1.2vw,15px);
  background:radial-gradient(120% 80% at 50% 0%,#0b2a8f 0%,#04126a 45%,#020a3f 100%)}
.pad-touch{position:relative;flex:1;border-radius:8px;border:1.5px dashed rgba(169,181,242,.75);background:rgba(0,0,60,.4)}
.pad-dot{position:absolute;left:28%;top:42%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 0 10px rgba(255,255,255,.75)}
.pad-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8%}
.pad-btns i{display:block;aspect-ratio:1.5/1;border-radius:6px 2px 6px 2px;border:1px solid #c4dcff;background:linear-gradient(180deg,#63aef7,#1c4fae)}
.pad-btns i:nth-child(2){border-color:#d4f8c6;background:linear-gradient(180deg,#8be86d,#1f8a2a)}
@media (max-width:1039px){.tvs-in{grid-template-columns:minmax(0,1fr)}.tvs-art{order:-1}}
@media (max-width:1039px){.mob-in{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- 04 FAQ */
.faq-sec{scroll-margin-top:60px}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
/* tytuł z tańczącym Simem razem, przyklejone przy przewijaniu pytań obok */
.faq-l{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.faq-sec h2{font-size:clamp(38px,4.6vw,64px);line-height:.95}
.sprite{width:min(300px,100%);aspect-ratio:330/344;margin-top:6px;background-image:url(assets/gentleman-sprite.webp);background-size:1600% 1600%;
  background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.faq-list{display:flex;flex-direction:column;gap:8px}
.qa{background:#0b1c80;border:2px solid #2a4cc4;border-radius:14px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(255,255,255,.18);transition:border-color .2s}
.qa.open{border-color:#00faf6}
.qa h3{margin:0;font:inherit}
.qa-q{display:flex;align-items:center;gap:16px;width:100%;cursor:pointer;border:none;background:transparent;text-align:left;padding:16px 18px;
  font-family:var(--f-body);font-size:17px;font-weight:600;color:#fff}
.qa-q:hover{background:rgba(0,250,246,.08)}
.qa-q:focus-visible{outline:3px solid #ffd84a;outline-offset:-3px}
.qa-q .q{flex:1}
.qa-sign{font-size:20px;line-height:1;width:32px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;
  text-shadow:0 1px 1px rgba(0,0,40,.6);border-radius:20px 8px 20px 8px;background:linear-gradient(#78b8ff,#3a78e8 50%,#2358cc);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,40,.35)}
.qa-a{overflow:hidden;transition:height .25s ease-out}
.qa-a p{margin:0;padding:0 18px 18px;font-size:16px;line-height:1.6;color:#c9d6ff;max-width:680px;text-wrap:pretty}
.qa-a b{color:#fff}
.faq-group{margin:18px 2px 4px;font-size:19px;letter-spacing:.12em;color:#8ea6f0}
.faq-more{margin:10px 2px 0;font-size:15px;line-height:1.5;color:#9fb6ff}
.faq-more .lnk{font:inherit;color:#00faf6;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1039px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-l{position:static}.sprite{display:none}}
@media (max-height:640px){.faq-l{position:static}}

/* ---------------------------------------------------------------- stopka: licznik sąsiadów */
.foot{background:#000;border-top:2px solid #1b3aa8;position:relative;overflow:hidden}
.foot-bg{position:absolute;left:0;right:0;top:0;height:min(900px,100%);pointer-events:none;background-image:url(assets/collection/bg-ts1.webp);
  background-size:cover;background-position:center;opacity:.42}
.foot-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(4,10,60,.55) 35%,rgba(0,0,0,.92) 70%,#000 100%)}
.foot-in{position:relative;max-width:1100px;margin:0 auto;padding:clamp(80px,10vw,150px) clamp(16px,3vw,40px) 40px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:32px}
.foot h2{font-size:clamp(42px,6.4vw,96px);line-height:1}
.foot-cards{width:min(900px,100%);display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;text-align:left}
.count-card{flex:1 1 380px;min-width:0;padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px}
.count-head{display:flex;align-items:center;gap:10px}
.mini-pb{filter:drop-shadow(0 0 8px rgba(126,224,79,.85))}
.mini-pb .plumbob{width:16px;height:26px}
.count-head .t,.ms-card .t{font-size:17px;font-weight:700;color:#fff}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.12em;color:#7ee04f}
.live i{width:7px;height:7px;border-radius:50%;background:#7ee04f;box-shadow:0 0 8px #7ee04f}
.digits{display:flex;justify-content:center;gap:10px;min-height:1.1em;font-family:var(--f-head);font-size:clamp(72px,11vw,132px);line-height:1;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,40,.55),0 0 28px rgba(0,250,246,.35)}
.digit{position:relative;display:block;height:1.1em;width:.78em;overflow:hidden;border-radius:12px;
  background:linear-gradient(#22379e 0%,#13258a 50%,#0c1b78 50%,#0a1670 100%);border:2px solid #8fa8ff;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(0,0,0,.8)}
.digit .roll{position:absolute;left:0;right:0;top:.05em;display:flex;flex-direction:column;align-items:center;transition:transform 1s cubic-bezier(.3,1.35,.5,1)}
.digit .roll span{height:1em}
.digit .split{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,30,.7);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.ms-card{flex:1 1 260px;min-width:0;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -24px rgba(0,0,0,.85)}
.ms-row{display:flex;align-items:baseline;gap:8px;color:#c9d6ff;font-size:15px}
.ms-num{font-family:var(--f-head);font-size:34px;color:#00faf6;line-height:1}
.ms-ff{width:30px;height:30px;align-self:center;flex:none;filter:drop-shadow(0 0 6px rgba(0,250,246,.35))}
/* wskaźniki relacji z gry: ++ / + przy zapisie i wzroście licznika, - / -- przy błędach formularza */
.count-card{position:relative}
.rel-float{position:absolute;right:20px;top:52px;height:36px;width:auto;pointer-events:none;opacity:0}
.b-err{display:flex;align-items:center;gap:10px}
.b-err .rel{height:26px;width:auto;flex:none}
.modal-box .rel-pop{height:48px;width:auto}
.ms-bar{height:16px;border-radius:5px;background:#000733;border:2px solid #3c5bd6;overflow:hidden}
.ms-bar b{display:block;height:100%;width:0;background:linear-gradient(#a6f574,#45b82e);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.ms-note{font-size:14px;line-height:1.45;color:#a9b4f0;text-wrap:pretty}
.foot-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* zalogowany gracz już jest w becie: bez „Dołącz do zamkniętej bety” (body.acct-in z account.js) */
body.acct-in .foot-join{display:none}
.legal{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:28px;margin-top:24px;
  border-top:1px solid #1b2a6a;font-size:13px;line-height:1.5;color:#8ea6f0;text-align:left}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 20px}
/* „Wesprzyj projekt”: kawa na buycoffee.to, w stopce pod przyciskami */
.support{width:min(720px,100%);display:flex;align-items:flex-start;gap:16px;padding:16px 20px 18px;text-align:left;
  border:2px solid #8fa8ff;border-radius:14px;background:#0a1872;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -24px rgba(0,0,0,.85)}
.support-ic{flex:none;width:44px;height:44px;padding:8px;border-radius:14px 5px 14px 5px;color:#05210a;
  background:linear-gradient(#c8ff9a,#6fd94a 50%,#3fae2a);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,40,0,.3)}
.support h3{margin:0 0 4px;font-size:18px;font-weight:700;color:#fff}
.support p{margin:0;font-size:15px;line-height:1.55;color:#c9d6ff;text-wrap:pretty}
.support a{white-space:nowrap}
@media (max-width:420px){.support{padding:14px 14px 16px;gap:12px}.support-ic{width:38px;height:38px;padding:7px}}

/* ---------------------------------------------------------------- zamknięta beta (beta.html) */
.b-hero{position:relative;background:radial-gradient(ellipse 55% 60% at 50% 70%,rgba(46,110,255,.36),transparent 70%),#040a3c;overflow:hidden}
.b-top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1280px;margin:0 auto;padding:clamp(16px,2.4vw,28px) clamp(16px,3vw,40px) 0}
.b-top .home{font-size:15px;font-weight:700}
.b-status{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.08em;color:#7ee04f;background:#07085e;padding:6px 14px;border:2px solid #8f9cf0;border-radius:12px}
.b-top .home{white-space:nowrap}
@media (max-width:640px){.b-top{flex-wrap:wrap}.b-status{order:3;width:100%;justify-content:center;font-size:13px}}
.b-hero-in{max-width:1280px;margin:0 auto;padding:clamp(28px,3.5vw,48px) clamp(16px,3vw,40px) clamp(64px,8vw,128px);display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5vw,64px)}
.b-title{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.b-title img{height:clamp(72px,9vw,124px);width:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(87,140,255,.35))}
.b-title h1{font-size:clamp(22px,4.4vw,80px);line-height:1;white-space:nowrap}
.b-title h1 span{color:#00faf6}
.b-title p{margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.45;color:#c9d6ff;text-wrap:pretty}
/* „W grze teraz: N” pod podtytułem, jak plakietka statusu */
.b-online{display:inline-flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.08em;color:#7ee04f;background:#07085e;
  padding:6px 14px;border:2px solid #8f9cf0;border-radius:12px;margin-top:-4px}
.b-row{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(40px,5vw,72px)}
.b-form-col{flex:1 1 380px;min-width:0;max-width:480px;display:flex;flex-direction:column}
.b-form{position:relative;padding:16px clamp(14px,2.6vw,20px) 20px;scroll-margin-top:24px}
.b-form form{display:flex;flex-direction:column;gap:18px}
.b-intro{border:2px solid #3c5bd6;border-radius:12px;background:linear-gradient(#000733,#020f4a);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.b-intro b{font-size:20px;color:#fff}
.b-intro span{font-size:16px;font-weight:700;line-height:1.4;color:#fff;text-wrap:pretty}
.b-field{display:flex;flex-direction:column;gap:4px}
.b-field .l{font-size:17px;font-weight:700;color:#fff}
.b-field .h{font-size:13px;color:#a9b4f0;margin-bottom:6px}
.b-field input{font:inherit;font-size:18px;color:#fff;background:linear-gradient(#000733,#020f4a);border:2px solid #3c5bd6;border-radius:9px;padding:13px 14px;outline:none;width:100%}
.b-field input::placeholder{color:#5a6ab8}
.b-field input:focus{border-color:#8ff4ff;box-shadow:0 0 0 3px rgba(0,250,246,.22)}
.b-field input[aria-invalid="true"]{border-color:#e0648f}
/* błąd e-maila pod polem (site.js: waitlist) */
.b-ferr{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14.5px;line-height:1.4;color:#ffd2c8}
.b-ferr .rel{height:22px;width:auto;flex:none}
/* zgoda: cały wiersz to pole do stuknięcia (co najmniej 40 px), pole wyboru większe */
.b-check{display:flex;gap:12px;align-items:flex-start;min-height:40px;font-size:15px;line-height:1.45;color:#c9d6ff;cursor:pointer;padding:6px 2px}
.b-check input{width:24px;height:24px;margin:-1px 0 0;flex:none;accent-color:#7ee04f;cursor:pointer}
.b-check .req{color:#7ee04f}
.b-err{font-size:15px;color:#ffd2c8;background:#3a0a3a;border:2px solid #c04a7a;border-radius:10px;padding:10px 14px}
/* wąski telefon: długi napis zawija się zamiast wychodzić poza przycisk */
.b-submit{justify-content:center;font-size:18px;padding:14px 36px;margin-top:4px;white-space:normal;text-align:center;line-height:1.25}
@media (max-width:339px){.b-submit{padding:12px 18px}}
.b-submit[disabled]{opacity:.7;cursor:wait}
.b-note{font-size:13px;color:#a9b4f0;text-align:center}
.b-free{margin-top:-10px;font-size:14px;font-weight:700;color:#7ee04f;text-align:center}
.b-dc{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:11px 16px;font-size:15px;font-weight:700;color:#fff!important;
  text-decoration:none!important;border:2px solid transparent;border-radius:10px;transition:background .2s,border-color .2s}
.b-dc:hover{background:#5865f2;border-color:#d8e6ff;color:#fff!important}
.b-code{margin-top:16px;padding:14px clamp(14px,2.6vw,20px) 16px;display:flex;flex-direction:column;gap:10px;scroll-margin-top:24px}
.b-code-t{font-size:15px;line-height:1.4;color:#c9d6ff}
.b-code-t b{color:#fff;font-size:17px}
.b-code-row{display:flex;gap:10px}
.b-code-row input{flex:1;min-width:0;font:inherit;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(#000733,#020f4a);border:2px solid #7ee04f;border-radius:9px;padding:10px 12px;outline:none}
.b-code-row input::placeholder{color:#4f6a8a;letter-spacing:.14em}
.b-code-row input:focus{border-color:#c8ff9a;box-shadow:0 0 0 3px rgba(126,224,79,.25)}
.b-code-row .leaf{font-size:16px;padding:10px 18px}
.b-crt-col{flex:1 1 460px;min-width:0;max-width:620px;display:flex;justify-content:center}
.b-crt-col .crt{width:min(620px,100%)}
.b-crt-col .float-exe{left:-4%;top:4%;width:240px}
.b-crt-col .exe-title{font-size:16px}
.b-crt-col .exe-log{font-size:15px;line-height:1.35}
.b-crt-col .float-needs{right:-5%;bottom:24%;width:210px;box-shadow:0 24px 50px -16px rgba(0,0,0,.8)}
.b-crt-col .need{grid-template-columns:64px 1fr}
.b-crt-col .float-pb{right:8%;top:-7%;width:auto;height:auto}
.b-crt-col .pb-glow{width:42px;height:66px;filter:drop-shadow(0 0 16px rgba(126,224,79,.9))}
.b-crt-col .float-money{left:6%;bottom:18%;font-size:22px;border-radius:0}
.b-about{background:linear-gradient(90deg,#02095b,#01186b 50%,#01277b);border-top:1px solid #1b3aa8;border-bottom:1px solid #1b3aa8;padding:clamp(64px,8vw,120px) clamp(16px,3vw,40px)}
.b-about-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.b-about-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.b-kicker{font-size:14px;letter-spacing:.14em;color:#00faf6;font-weight:700}
.b-about-head h2{font-size:clamp(40px,5.4vw,72px);line-height:1}
.b-about-head h2 span{color:#00faf6}
.b-about-head p{margin:0;max-width:640px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#c9d6ff;text-wrap:pretty}
.b-cards{display:flex;flex-wrap:wrap;gap:16px}
.b-pair{flex:1 1 396px;min-width:0;display:flex;flex-wrap:wrap;gap:16px}
.b-card{flex:1 1 190px;min-width:0;border:2px solid #8fa8ff;border-radius:14px;background:linear-gradient(#000733,#020f4a);padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.b-card .titlebar{margin:-18px -18px 6px;padding:6px 8px 6px 14px;border-radius:12px 12px 0 0;font-size:14px}
.b-card h3{margin:0;font-size:20px;font-weight:700;line-height:1.2;color:#fff}
.b-card p{margin:0;font-size:15px;line-height:1.5;color:#c9d6ff;text-wrap:pretty}
.b-inc{display:flex;flex-direction:column;align-items:center;gap:14px}
.covers{position:relative;width:100%;height:clamp(300px,36vw,420px);perspective:1400px;overflow:hidden}
.cov{position:absolute;left:50%;top:50%;width:clamp(170px,19vw,250px);aspect-ratio:.76;border-radius:4px;background-size:cover;background-position:center;pointer-events:none;
  transition:transform .7s cubic-bezier(.2,.9,.25,1.12),opacity .45s,filter .45s,box-shadow .45s}
.cov-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:14px;letter-spacing:.1em;color:#8ea6f0;transition:opacity .3s;white-space:nowrap}
.chips{display:flex;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,1.2vw,16px);padding:12px 24px;max-width:100%;position:relative;z-index:3}
.chip{position:relative;isolation:isolate;font-family:'Comic Neue','Comic Sans MS',sans-serif;font-weight:700;font-size:clamp(12px,1.15vw,16px);white-space:nowrap;flex:none;cursor:pointer;
  padding:14px clamp(10px,1.5vw,24px);border:0;background:transparent;color:#f2f8ff;text-shadow:1px 1px 0 #021a4a;outline:none;transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);border-radius:46% 18% 46% 18% / 70% 40% 70% 40%;
  background:radial-gradient(ellipse 70% 45% at 45% 12%,rgba(255,255,255,.6),transparent 70%),linear-gradient(#5fb2ee,#1d82cc 45%,#035fa0 58%,#02467a);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.55),inset -3px -4px 0 rgba(0,20,60,.45)}
.chip:hover{filter:brightness(1.12)}
.chip:active{translate:-3px 3px}
.chip:focus-visible{outline:3px solid #ffd84a;outline-offset:5px}
.chip.on{z-index:2;transform:translateY(-4px) scale(1.06)}
.chip.on::before{background:radial-gradient(ellipse 70% 45% at 45% 12%,rgba(255,255,255,.6),transparent 70%),linear-gradient(#c4f79a,#68d443 45%,#3aa524 58%,#237d16)}
@media (max-width:819px){.chips{flex-wrap:wrap}}
.modal{position:fixed;inset:0;z-index:100;background:rgba(2,6,39,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{width:min(440px,100%);background:#07085e;border:1px solid #3d4fc7;border-radius:12px;padding:36px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 40px 80px -20px rgba(0,0,0,.8)}
.modal-box h3{font-size:38px;line-height:1.05}
.modal-box p{margin:0;font-size:18px;color:#c9d6ff}
.modal-box .pb-glow{width:34px;height:54px;margin-bottom:6px}
.modal-box .leaf{margin-top:10px;padding:10px 44px;font-size:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,40,.35),0 6px 14px -6px rgba(0,0,0,.6)}

/* FAQ na liście oczekujących (beta.html): jedna kolumna, bez tańczącego Sima (arkusz klatek jest ciężki) */
.b-faq{border-top:1px solid #1b3aa8}
.b-faq-in{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.b-faq-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.faq-more a.lnk{color:#00faf6}
/* jednowierszowy komunikat strony (np. „Wylogowano” na liście oczekujących), znika sam */
.s-toast{position:fixed;left:50%;bottom:22px;z-index:120;max-width:min(92vw,560px);transform:translate(-50%,12px);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;padding:10px 18px;border-radius:12px;font-family:var(--f-body);font-size:15px;line-height:1.4;
  color:#fff;text-align:center;background:linear-gradient(180deg,#143c9c,#0a2266);border:2px solid #c8cdd7;
  box-shadow:inset 0 1px 0 rgba(190,230,255,.35),0 8px 18px rgba(0,0,20,.55)}
.s-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- polityka prywatności (privacy.html) */
.doc{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px) 56px;color:#c9d6ff;font-size:16px;line-height:1.65}
.doc h1{font-size:clamp(36px,5vw,60px);line-height:1;margin-bottom:10px}
.doc h2{margin:34px 0 8px;font-size:22px;color:#fff}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc a{overflow-wrap:anywhere}
.doc-foot{max-width:820px;margin:0 auto;padding:20px clamp(16px,3vw,40px) 48px;display:flex;flex-wrap:wrap;gap:8px 22px;
  border-top:1px solid #1b2a6a;font-size:14px}

/* ---------------------------------------------------------------- animacje (wyłączone przy prefers-reduced-motion) */
@keyframes a-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes a-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes a-float2{0%,100%{transform:translate(0,0) rotate(-1.5deg)}50%{transform:translate(0,-10px) rotate(-.5deg)}}
@keyframes a-float3{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(12px) rotate(.5deg)}}
@keyframes a-spin{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-8px)}100%{transform:rotateY(360deg) translateY(0)}}
@keyframes a-spinY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes a-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes a-flicker{0%,50%,100%{opacity:1}25%{opacity:.9}75%{opacity:.95}}
@keyframes a-blink{0%,50%{opacity:1}51%,100%{opacity:.15}}
@keyframes a-led{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes a-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes a-cursor{0%,100%{left:30%;top:40%}30%,40%{left:58%;top:30%}70%{left:44%;top:64%}}
@keyframes a-cursor2{0%,100%{left:50%;top:50%}35%,45%{left:72%;top:28%}80%{left:35%;top:70%}}
@keyframes a-tap{0%{transform:scale(.4);opacity:0}12%{opacity:.95}55%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes a-pan{0%,100%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.1) translate(-2%,-1.5%)}}
@keyframes a-pop{0%{transform:scale(.6) translateY(30px);opacity:0}70%{transform:scale(1.04);opacity:1}100%{transform:none;opacity:1}}
@keyframes a-relup{0%{transform:translateY(12px) scale(.6);opacity:0}18%{transform:translateY(0) scale(1.08);opacity:1}70%{opacity:1}100%{transform:translateY(-48px) scale(1);opacity:0}}
@keyframes a-relpop{0%,35%{transform:scale(0);opacity:0}70%{transform:scale(1.18);opacity:1}100%{transform:none;opacity:1}}
/* telefon (sekcja 04), cykl 14 s: pion z komunikatem -> obrót -> gra, klik -> menu -> okno pauzy -> Graj dalej -> z powrotem do pionu */
@keyframes ph-turn{0%,13%{transform:rotate(90deg) scale(.56)}24%,87%{transform:none}98%,100%{transform:rotate(90deg) scale(.56)}}
@keyframes ph-rot{0%,17%{opacity:1}22%,90%{opacity:0}95%,100%{opacity:1}}
@keyframes ph-rotico{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@keyframes ph-dim{0%,44%,77%,100%{filter:none}47%,74%{filter:brightness(.62) blur(1px)}}
@keyframes ph-menu{0%,44%{opacity:0;visibility:hidden}46.5%,74%{opacity:1;visibility:visible}77%,100%{opacity:0;visibility:hidden}}
@keyframes ph-pop{0%,44%{transform:scale(.86)}48%,100%{transform:none}}
@keyframes ph-tap1{0%,29%{transform:scale(.4);opacity:0}30%{opacity:.95}34%,100%{transform:scale(1.6);opacity:0}}
@keyframes ph-tap2{0%,41%{transform:scale(.4);opacity:0}42%{opacity:.95}46%,100%{transform:scale(1.6);opacity:0}}
@keyframes ph-tap3{0%,69%{transform:scale(.4);opacity:0}70%{opacity:.95}74%,100%{transform:scale(1.6);opacity:0}}
@keyframes ph-press{0%,41.5%,44%,100%{transform:none}42.6%{transform:scale(.84)}}
@keyframes ph-gopress{0%,69.5%,72%,100%{filter:none}70.6%{filter:brightness(1.35)}}
/* telewizor: kursor w grze idzie tak samo jak palec na gładziku telefonu */
@keyframes tv-move{0%,100%{left:28%;top:42%}30%{left:64%;top:30%}55%{left:54%;top:66%}78%{left:36%;top:58%}}
@keyframes tv-wave{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .an-float{animation:a-float 7s ease-in-out infinite}
  .b-crt-col .an-float{animation:a-float-b 6s ease-in-out infinite}
  .an-float2{animation:a-float2 5.2s ease-in-out infinite}
  .an-float3{animation:a-float3 6.1s ease-in-out infinite}
  .an-spin{animation:a-spin 9s linear infinite}
  .an-spinY{animation:a-spinY 3s linear infinite}
  .an-bob{animation:a-bob 2.2s ease-in-out infinite}
  .an-flicker{animation:a-flicker 3.8s linear infinite}
  .an-blink{animation:a-blink 1.1s linear infinite}
  .an-led{animation:a-led 2.4s linear infinite}
  .an-marquee{animation:a-marquee 38s linear infinite}
  .an-cursor{animation:a-cursor 9s ease-in-out infinite}
  .an-cursor2{animation:a-cursor2 6.5s ease-in-out infinite}
  .an-pan{animation:a-pan 18s ease-in-out infinite}
  .an-tap{animation:a-tap 2.6s ease-out infinite}
  .ph-demo{animation:ph-turn 14s ease-in-out infinite}
  .ph-demo .ph-rot{animation:ph-rot 14s linear infinite}
  .ph-demo .ph-rot svg{animation:ph-rotico 2.2s ease-in-out infinite}
  .ph-demo .phone-screen>img{animation:ph-dim 14s linear infinite}
  .ph-demo .ph-menu{animation:ph-menu 14s linear infinite}
  .ph-demo .ph-dlg{animation:ph-pop 14s ease-out infinite}
  .ph-demo .tap{animation:ph-tap1 14s ease-out infinite}
  .ph-demo .ph-tap-menu{animation:ph-tap2 14s ease-out infinite}
  .ph-demo .ph-tap-go{animation:ph-tap3 14s ease-out infinite}
  .ph-demo .phone-menu{animation:ph-press 14s linear infinite}
  .ph-demo .ph-b.go{animation:ph-gopress 14s linear infinite}
  .tv-screen .cursor,.pad-dot{animation:tv-move 7s ease-in-out infinite}
  .tv-waves path{animation:tv-wave 1.8s ease-in-out infinite}
  .tv-waves path:nth-child(2){animation-delay:.3s}
  .tv-waves path:nth-child(3){animation-delay:.6s}
  .modal-box{animation:a-pop .52s cubic-bezier(.2,.9,.3,1.2)}
  .modal-box .rel-pop{animation:a-relpop .9s cubic-bezier(.2,.9,.3,1.3)}
  .rel-float.go{animation:a-relup 1.7s ease-out forwards}
  .rv{opacity:0;transform:translateY(32px)}
  .rv.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){.qa-a,.digit .roll,.ms-bar b,.need-bar b,.cov,.chip,.coll-btn .cover{transition:none!important}}
/* Sim w FAQ bez animacji: jedna klatka (assets/gentleman-still.webp z tools/make_lite_assets.py) zamiast arkusza
   5280x5504, który po rozpakowaniu zajmuje ~116 MB pamięci */
@media (prefers-reduced-motion:reduce){.sprite{background-image:url(assets/gentleman-still.webp);background-size:100% 100%}}
/* lekki tryb (html.lite z site.js: telewizor, przystawka TV, słaby sprzęt, ?lite=1): jak przy prefers-reduced-motion,
   do tego bez rozmyć tła - na słabej grafice to one mulą najbardziej (rozmycie liczy się od nowa w każdej klatce) */
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.lite .rv{opacity:1;transform:none}
html.lite .hdr{background:rgba(3,8,48,.97)}
html.lite .modal{background:rgba(2,6,39,.9)}
html.lite .sprite{background-image:url(assets/gentleman-still.webp);background-size:100% 100%}